<!--
 * @FileDescription 位置标记框
 * @Author lz
 * @Date 20230202 14:28:57
 * @LastEditors lz
 * @LastEditTime 20230202 14:28:57
-->
<template>
    <div class="signBox">
        <img class="square" src="/images/square.png">
        <div class="vehicleNo">
            PVH46131
        </div>
        <div class="row_sign">
            <div class="col_l">
                类型：
            </div>
            <div class="col_r">
                小汽车
            </div>
        </div>
        <div class="row_sign">
            <div class="col_l">
                X：
            </div>
            <div class="col_r">
                1.6
            </div>
        </div>
        <div class="row_sign">
            <div class="col_l">
                Y：
            </div>
            <div class="col_r">
                1.6
            </div>
        </div>
        <img src="/images/IndicatorLine.png" class="indicatorLine">
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive } from 'vue'
const state = reactive({
});
</script>

<style scoped>
.signBox {
    position: absolute;
    left: 460px;
    width: 634px;
    height: 74px;
    background-image: url('/images/IndicatorBox.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.square {
    width: 55px;
    height: 55px;
    margin-top: 9px;
    margin-left: 12px;
    float: left;
}

.vehicleNo {
    float: left;
    line-height: 74px;
    font-size: 18px;
    font-weight: bold;
    color: #FEFFFF;
    margin-right: 40px;
}

.row_sign {
    float: left;
    width: 22%;
    line-height: 74px;
}

.col_l {
    font-size: 14px;
    color: #C3DAF4;
    float: left;
}

.col_r {
    font-size: 16px;
    color: #FFFFFF;
    float: left;
}
.indicatorLine{
    position: absolute;
    left: 302px;
    top: 54px;
    width: 31px;
    height: 162px;
}
</style>